<template>
    <div class="collect_confirm">
        <top-timer :back="false"/>
        <div class="confirm_box" v-if="confirmType==='01'">
            <div class="box_title center">
                <div class="font_40 col_333">箱门已关闭，请确认操作无误后点击“收衣完成”</div>
                <div class="font_28 col_666">如有遗漏，请重新开箱后取走衣物</div>
            </div>
            <div class="order_msg center font_30 col_666">
                <div>订单号：{{boxDetailInfo.orderCode}}</div>
                <div>箱格号：{{boxDetailInfo.boxCode}}</div>
                <div class="font_28">智能柜编号：{{cabinetCode}}</div>
                <div class="font_28">智能柜地址：{{address}}</div>
            </div>
            <div class="btn center">
                <div class="again_open font_40" @click="openAgain">重新开箱</div>
                <div class="confirm_btn font_40" @click="collectSuccess()">收衣完成</div>
            </div>
        </div>
        <div class="confirm_box" v-if="confirmType==='02'">
            <div class="box_title center">
                <img src="@/assets/img/success-icon.png" alt="" style="width:50px;height:50px;">
                <div class="font_40 col_333">收衣成功</div>
            </div>
            <div class="order_msg center font_30 col_666">
                <div>订单号：{{boxDetailInfo.orderCode}}</div>
                <div>箱格号：{{boxDetailInfo.boxCode}}</div>
                <div class="font_28">智能柜编号：{{cabinetCode}}</div>
                <div class="font_28">智能柜地址：{{address}}</div>
            </div>
            <div class="btn center">
                <div class="again_open font_40" @click="home">返回首页</div>
                <div class="confirm_btn font_40" @click="collectClothes">继续收衣</div>
            </div>
        </div>
        <top-tips/>
    </div>
</template>

<script>
  export default {
    name: 'collect-confirm',
    data() {
      return{
        confirmType: this.$route.query.confirmType || '01',
        boxDetailInfo:{},
        cabinetCode:localStorage.getItem('cabinetCode'),
        address:localStorage.getItem('address'),
      }
    },
    created() {
      let boxDetailId = this.$route.query.boxDetailId
      this.$axios.get('receiveClothesRest/getBoxDetailInfo',{
        params:{
          boxDetailId:boxDetailId
        }
      }).then(res => {
        this.boxDetailInfo = res.data
      })
    },
    methods:{
        collectSuccess() {
            this.confirmType = '02';
            this.$router.push({path: 'collectConfirm', query: { boxDetailId: this.$route.query.boxDetailId, confirmType: '02'}})
        },
      // 重新开箱
      openAgain(){
        let boxCode = this.$route.query.boxCode
        let success = () => {
          this.$router.back()
        }
        let error = () => {
          this.$alert("开箱失败");
        }
        let boxMac = this.$boxConfig[boxCode]
        window.cordova.plugins.CabinetPlugin.sendOpenBoxCommand(boxMac, success, error)
      },
      home(){
        this.$router.push({path:'Home',query:{isAdmin:true}})
      },
      collectClothes(){
        this.$router.push({path:'collectClothes'})
      },
    }
  }
</script>

<style lang="scss">
    .collect_confirm{
        .confirm_box {
            margin-top:0.60rem;
            .box_title {
                div {
                    margin: 0.30rem 0;
                }
            }
            .order_msg{
                width:90%;
                height:2.50rem;
                background:rgba(249,252,255,1);
                box-shadow:0.02rem 0.02rem 0.20rem 0rem rgba(0,0,0,0.1);
                border-radius:0.24rem;
                margin:0.40rem auto;
                padding:0.10rem 0;
                div{
                    margin:0.10rem 0;
                }
            }
            .btn{
                position: fixed;
                width:100%;
                bottom:1.6rem;
                left:0;
                div{
                    width:2.40rem;
                    height:0.80rem;
                    display: inline-block;
                    line-height:0.75rem;
                    box-shadow:0rem 0.02rem 0.04rem 0rem rgba(10,130,236,0.2);
                    border-radius:0.51rem;
                    border:0.02rem solid rgba(0,128,244,1);
                    margin:0 0.30rem;
                }
                .again_open{
                    background-color: #fff;
                    color:#0A82EC;
                }
                .confirm_btn{
                    color: #fff;
                    background-color:#0A82EC;
                }
            }
        }
    }
</style>
